<div v-cloak id="app" class="main-content">
    <one-tabs :option="tabData" @change="handleChange"></one-tabs>
    <one-table v-if="!helpShow" :option="tableOption" :data="tableData" :loading="loading" @current-change="" @size-change="">
        <!-- 自定义列 -->
        <template slot="status" slot-scope="scope">
            <el-switch  :value="scope.row.status" :disabled="!scope.row.install" :active-value="1" :inactive-value="0"
                @change="changeStatus(scope.row, scope.index)">
            </el-switch>
        </template>
       
        <!-- 自定义操作列 -->
        <template slot="operates" slot-scope="scope">
            
            <template v-if="scope.row.install==0">
                <el-button style="width:60px"  type="primary"  plain size="mini"  class="_tool" @click="install(scope.row, scope.index)">
                    <i class="el-icon-download"></i>安装
                </el-button>
            </template>
            <template v-if="scope.row.install==1">
                <el-button type="primary"   size="mini"  class="_tool" @click="config(scope.row, scope.index)">
                    <i class="el-icon-s-tools"></i>
                </el-button>
               
                <el-popconfirm
                    confirm-button-text='好的'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    icon-color="red"
                    title="卸载后配置将清空,确定卸载吗？"
                    @confirm="uninstall(scope.row, scope.index)"
                >
                <el-button  slot="reference" size="mini" class="_tool" type="danger">
                    <i class="el-icon-delete"></i>
                </el-button>
                </el-popconfirm>
            </template>
            
            
        
        </template>
    </one-table>
<div v-highlight v-if="helpShow">
<pre>
<code >/**
* [示例]发起支付
*/
$this-&gt;redirect('/pay/index/refund?' . http_build_query($param));
public function paySubmit()
{
    $orderNo = input('get.order_no', order_number());
    $method = input('get.method', 'wechat_qr');
    $param = [];
    $param['method'] = $method; // 支付方式[wechat, alipay]
    $param['money'] = input('get.total', 6); // 支付金额
    $param['uid'] = 1000001; // 用户标识
    $param['order_no'] = $orderNo; // 订单号
    $param['body'] = '支付测试'; // 支付标题
    $param['goback'] = get_domain() . '/pay/test'; // 同步回调后的跳转地址
    $param['openid'] = '';
    $param['sign'] = md5(http_build_query($param) . config('one_auth.key'));



    if ($method == 'wechat_app') {
        $rs = action('pay/index/wx_app', [$param], 'home');
        exit(json_encode($rs));
    }
    if ($method == 'alipay_app') {
        $param['product_code'] = 'QUICK_MSECURITY_PAY';
        $param['pay_method'] = 'alipay.trade.app.pay';
        $rs = action('pay/index/wx_app', [$param], 'home');
        exit(json_encode($rs));
    }

    $this-&gt;redirect('/pay?' . http_build_query($param));
}

/**
* [示例]发起退款
*/
public function refundSubmit()
{
    $orderNo = input('get.order_no');

    $param = [];
    $param['order_no'] = $orderNo; // 已支付的订单号
    $param['money'] = 0.01; // 支付金额
    $param['goback'] = get_domain() . '/pay/test'; // 同步回调后的跳转地址
    $param['sign'] = md5(http_build_query($param) . config('one_auth.key'));
    $this->redirect('/pay/index/refund?' . http_build_query($param));
}

/**
* [示例]支付回调
* @param int $orderNo 订单号
* @param array $params 所有回传参数
*/
public function payment($orderNo, $param = [])
{
    if (!defined('IS_SAFE_PAY')) {
        return ['status' =&gt false, 'message' =&gt '非法请求'];
    }
    // 订单业务处理代码
    file_put_contents(Env::get('runtime_path') . $orderNo . '_payment.txt', json_encode($param, 1));
    return ['status' => true, 'url' => '/pay/test'];
}

/**
* [示例]退款回调
* @param int $orderNo 订单号
* @param array $params 所有回传参数
*/
public function refund($orderNo, $param = [])
{
    if (!defined('IS_SAFE_PAY')) {
        return ['status' => false, 'message' => '非法请求'];
    }
    // 订单业务处理代码
    file_put_contents(Env::get('runtime_path') . $orderNo . '_refund.txt', json_encode($param, 1));
    return ['status' => true, 'url' => '/pay/test'];
}</code>
</pre>
</div>
</div>

{include file='common@components/one-tabs'}
{include file='common@components/one-table'}
<!-- 高亮代码 -->
<link href="__STATIC__/lib/hljs/androidstudio.min.css" rel="stylesheet">
<script src="__STATIC__/lib/hljs/highlight.min.js?v=10.3.2"></script>
<script src="__STATIC__/lib/hljs/highlightjs-line-numbers.min.js?v=2.8.0"></script>
<script >
    Vue.directive('highlight', function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block) => {
            // let str = block.innerHTML;
            // 得到经过highlight.js之后的html代码
            // const preCode = hljs.highlightAuto(str).value;
            // const _html = "<ul><li>" + preCode.replace(/\n/g, "\n</li><li>") + "\n</li></ul>"
            // 处理后的HTML回写
            // block.innerHTML = unEscapeHTML(_html)
            hljs.highlightBlock(block)
        })
    })
    const _tabData= {:json_encode((array)$tabData, 1)} ;
    new Vue({
        el: '#app',
        created(){
            this.getData()
        },
        methods: {
            // 切换标签
            handleChange(item) {
                if(item.name == 'help'){
                    this.helpShow = true
                    return
                }
                window.location.href = item.url
            },
            //改变状态
            changeStatus(row,index) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'one_pay/index/status/',
                        id: row.id,
                        val: 1-row.status,
                    },
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                    this.getData()
                })
            },
            
           //安装卸载
           install(row,index){
                navigateTo({
                    s: 'one_pay/index/install',
                    code:row.code
                })
           },
           //config
           config(row,index){
                navigateTo({
                    s: 'one_pay/index/config',
                    code:row.code
                })
           },
           //删除
           uninstall(row,index){
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'one_pay/index/uninstall/',
                    },
                    data:{'code':row.code},
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                    this.getData()
                })

           },
            // 获取数据
            getData() {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'one_pay/index/index/',
                    },
                    data:{'status':_this.tabData.val},
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                    _this.tableData = e.data.data
                    
                })
            },
        },
        data() {
            return {
                helpShow:false,
                loading:false,
                tabData: _tabData,
                tableData: [],
                tableOption: {
                    index: true,
                    header: false,
                    selection: false,
                    operates: {width: 120},
                    page: false,
                    size: 'mini',
                    column: [{
                            label: '状态',
                            prop: 'status',
                            width:80,
                            slot: true,
                        }, {
                            label: '平台',
                            align:'left',
                            width:150,
                            prop: 'title',
                        }, {
                            label: '简介',
                            align:'left',
                            prop: 'intro'
                        }
                    ]
                }
            };
        }
    })
</script>